<script>
import file from '../../libs/file'

export default {
  props: {
    column:{
      type: Object,
      default: ''
    },
    value: {
      type: Object,
      default: ''
    },
    /**
     * 用于控制当前行的状态
     * view: 查看状态
     * edit: 编辑状态
     */
    rowStatus: {
      type: String,
      default: 'view'
    },
    /**
     * 是否可以编辑
     */
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      valueData: "",
      file: file
    }
  },
  mounted() {
  },
  methods: {
    // 对column进行处理
    newColumn(column) {
      // 如果column.setting不存在，就给它赋值一个空对象
      if (!column.setting) {
        column.setting = {}
      }
      // 如果宽度不存在，就给它赋值一个默认值
      if (!column.setting.width) {
        column.setting.width = '100%'
      }
      // 如果高度不存在，就给它赋值一个默认值
      if (!column.setting.height) {
        column.setting.height = '100%'
      }
      return column
    }
  },
  // 监听value的变化
  watch: {
    value: {
      handler(val) {
        this.valueData = val;
      },
      immediate: true
    }
  }
}
</script>

<template>
  <div v-if="rowStatus === 'view'">
    <el-image
      v-if="newColumn(column).setting.type === 'url'"
      :src="valueData"
      fit="contain"
      :preview-teleported="true"
      :preview-src-list="[valueData]"
      style="border-radius: 5px;"
      :style="{width: newColumn(column).setting.width, height: newColumn(column).setting.height}">
    </el-image>

    <el-image
      v-if="newColumn(column).setting.type === 'id'"
      :src="file.visit(valueData)"
      fit="contain"
      :preview-teleported="true"
      :preview-src-list="[file.visit(valueData)]"
      style="border-radius: 5px;"
      :style="{width: newColumn(column).setting.width, height: newColumn(column).setting.height}">
    </el-image>


  </div>
</template>

<style lang="scss" scoped>
.text-value {
  margin: 0 5px 0 5px;
}
.img-box {
  position: relative;
  display: inline-block;
  cursor: pointer;
  .cover{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    border-radius: 5px;

    .edit-icon{
      position: absolute;
      width: 50%;
      height: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.img-box:hover{

  .cover{
    background-color: rgba(0,0,0,0.8);
  }

}
.img-box:active{
  .cover{
    background-color: rgba(0,0,0,0.9);
  }
}
</style>